<template>
	<view class="container">
		<view class="header">
			<view class="title-section">
				<view class="title">我的邮件</view>
				<view class="subtitle">共8封邮件，3封未读</view>
			</view>
			<view class="search-section">
				<view class="search-box">
					<up-icon name="search" size="22" color="#909399"></up-icon>
					<input class="search-input" placeholder="搜索邮件内容" />
				</view>
			</view>
		</view>
		
		<view class="tab-section">
			<view class="tab-item active">全部</view>
			<view class="tab-item">未读</view>
			<view class="tab-item">已读</view>
			<view class="tab-item">系统</view>
		</view>
		
		<view class="mail-list">
			<view class="mail-item unread">
				<view class="mail-status"></view>
				<view class="mail-content">
					<view class="mail-top">
						<view class="mail-sender">系统通知</view>
						<view class="mail-time">12:30</view>
					</view>
					<view class="mail-title">您的账户安全状态已更新</view>
					<view class="mail-desc">尊敬的用户，您的账户安全评分已更新，点击查看详情...</view>
				</view>
			</view>
			
			<view class="mail-item">
				<view class="mail-status"></view>
				<view class="mail-content">
					<view class="mail-top">
						<view class="mail-sender">会员中心</view>
						<view class="mail-time">09:15</view>
					</view>
					<view class="mail-title">恭喜您获得VIP会员福利</view>
					<view class="mail-desc">尊敬的VIP会员，恭喜您获得本月专属福利，点击查看...</view>
				</view>
			</view>
			
			<view class="mail-item unread">
				<view class="mail-status"></view>
				<view class="mail-content">
					<view class="mail-top">
						<view class="mail-sender">客服中心</view>
						<view class="mail-time">昨天</view>
					</view>
					<view class="mail-title">您的反馈已收到回复</view>
					<view class="mail-desc">感谢您的反馈，我们已经针对您提出的问题进行了处理，详情如下...</view>
				</view>
			</view>
			
			<view class="mail-item">
				<view class="mail-status"></view>
				<view class="mail-content">
					<view class="mail-top">
						<view class="mail-sender">订单系统</view>
						<view class="mail-time">前天</view>
					</view>
					<view class="mail-title">您的订单已发货</view>
					<view class="mail-desc">订单号：SN20230315001，您的订单已发货，物流单号：SF1234567890，请注意查收...</view>
				</view>
			</view>
			
			<view class="mail-item unread">
				<view class="mail-status"></view>
				<view class="mail-content">
					<view class="mail-top">
						<view class="mail-sender">活动中心</view>
						<view class="mail-time">3月10日</view>
					</view>
					<view class="mail-title">新春特惠活动开始啦</view>
					<view class="mail-desc">春节特惠活动现已开始，多款商品低至5折，更有满减优惠等您来拿...</view>
				</view>
			</view>
		</view>
		
		<view class="empty-mail" style="display: none;">
			<image class="empty-icon" src="/static/user-img.jpg" mode="aspectFit"></image>
			<view class="empty-text">暂无邮件内容</view>
		</view>
		
		<view class="bottom-bar">
			<view class="bar-item">
				<up-icon name="checkmark-circle" size="24" color="#909399"></up-icon>
				<text>全选</text>
			</view>
			<view class="bar-item">
				<up-icon name="trash" size="24" color="#909399"></up-icon>
				<text>删除</text>
			</view>
			<view class="bar-item">
				<up-icon name="checkmark" size="24" color="#909399"></up-icon>
				<text>标为已读</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding-bottom: 100rpx;
}

.header {
	background-color: #ffffff;
	padding: 30rpx;
}

.title-section {
	display: flex;
	align-items: flex-end;
	margin-bottom: 20rpx;
}

.title {
	font-size: 36rpx;
	font-weight: 600;
	color: #303133;
	margin-right: 20rpx;
}

.subtitle {
	font-size: 24rpx;
	color: #909399;
}

.search-section {
	margin-top: 20rpx;
}

.search-box {
	display: flex;
	align-items: center;
	background-color: #f5f7fa;
	border-radius: 40rpx;
	padding: 16rpx 24rpx;
}

.search-input {
	flex: 1;
	height: 40rpx;
	font-size: 28rpx;
	color: #303133;
	margin-left: 10rpx;
}

.tab-section {
	display: flex;
	background-color: #ffffff;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #f2f5f9;
}

.tab-item {
	padding: 20rpx 0;
	margin-right: 40rpx;
	font-size: 28rpx;
	color: #606266;
	position: relative;
	
	&.active {
		color: #3c9cff;
		font-weight: 500;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 4rpx;
			background-color: #3c9cff;
			border-radius: 2rpx;
		}
	}
}

.mail-list {
	margin-top: 20rpx;
}

.mail-item {
	display: flex;
	background-color: #ffffff;
	padding: 30rpx;
	border-bottom: 1rpx solid #f2f5f9;
	
	&.unread {
		background-color: #f0f9ff;
		
		.mail-status {
			background-color: #3c9cff;
		}
	}
}

.mail-status {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background-color: transparent;
	margin-right: 20rpx;
	margin-top: 10rpx;
}

.mail-content {
	flex: 1;
}

.mail-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.mail-sender {
	font-size: 28rpx;
	color: #303133;
	font-weight: 500;
}

.mail-time {
	font-size: 24rpx;
	color: #909399;
}

.mail-title {
	font-size: 30rpx;
	color: #303133;
	margin-bottom: 10rpx;
	font-weight: 500;
}

.mail-desc {
	font-size: 26rpx;
	color: #606266;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.empty-mail {
	padding: 100rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #909399;
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #ffffff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.bar-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	text {
		font-size: 24rpx;
		color: #606266;
		margin-top: 8rpx;
	}
}
</style> 